<template>
  <div class="firstItem">
    <van-image :src="item.image"></van-image>
    <div class="store_name">{{ item.store_name }}</div>
    <div class="price">￥{{ item.price }}</div>
  </div>
</template>

<script>
export default {
  name: "FirstItem",
  props: ["item"],
};
</script>

<style lang="less" scoped>
.firstItem {
  padding: 1vw 2vw;
  border-radius: 10px;
  border: 1px solid #ccc;
  .van-image {
    width: 33vw;
    height: 32vw;
  }
  .store_name {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1; /* 可以显示的行数，超出部分用...表示*/
    -webkit-box-orient: vertical;
    font-size: 0.33rem;
  }
  .price {
    font-size: 0.33rem;
    color: red;
    font-weight: bold;
  }
}
</style>